<div class="container">
    <div class="formBox">
        <form class="form-horizontal" autocomplete="off" [formGroup]="myForm">
            <div class="form-group">
                <label class="col-sm-3 control-label">用户名</label>
                <div class="col-sm-9">
                    <input name="userName" class="form-control" formControlName="userName" required placeholder="请输入用户名">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">性别</label>
                <div class="col-sm-9">
                    <div class="radio">
                        <label>
                            <input type="radio" name="sex" value="1" checked> 男
                        </label>
                        <label class="ml-10">
                            <input type="radio" name="sex" value="0"> 女
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">出生日期</label>
                <div class="col-sm-9">
                    <input type="text" name="dateOfBirth" class="form-control" placeholder="请选择日期">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">邮箱</label>
                <div class="col-sm-9">
                    <input type="text" name="email" class="form-control" placeholder="请输入邮箱">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">电话</label>
                <div class="col-sm-9">
                    <input type="text" name="mobile" class="form-control" placeholder="请输入11位手机号码">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">兴趣爱好</label>
                <div class="col-sm-9">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="xqah_one" value="1">乒乓球
                        </label>
                        <label>
                            <input type="checkbox" name="xqah_one" value="2">羽毛球
                        </label>
                        <label>
                            <input type="checkbox" name="xqah_one" value="3">上网
                        </label>
                        <label>
                            <input type="checkbox" name="xqah_one" value="4">旅游
                        </label>
                        <label>
                            <input type="checkbox" name="xqah_one" value="5">购物
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">国家</label>
                <div class="col-sm-9">
                    <select class="form-control">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">详细地址</label>
                <div class="col-sm-9 form-inline">
                    <select class="form-control">
                        <option value="">请选择</option>
                    </select>
                    <span class="pl-10">
                        <input type="text" name="address" class="form-control" placeholder="请输入详细地址"/>
                    </span>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                    <button type="submit" class="btn btn-primary">提交</button>
                    <button type="button" class="btn btn-default ml-40">取消</button>
                </div>
            </div>
        </form>
        <app-city myName="我是子组件" (myEvent)="handelEvent($event)"></app-city>
    </div>
</div>
